﻿<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<title>表单时间选择器 &middot; BootstrapVue</title>
<!-- Bootstrap 核心CSS -->
<link href="../../../v4/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 本文档额外专用css -->
<link href="../../../v4/assets/css/docsearch.min.css" rel="stylesheet">
<link href="../../../v4/assets/css/docs.min.css" rel="stylesheet">
<link href="../../style/bv_path.css" rel="stylesheet">

<!-- Favicons图标定义 -->
<link data-n-head="ssr" rel="manifest" href="../../manifest.json">
<link data-n-head="ssr" rel="shortcut icon" href="../../style/icons/icon_64.png">
<link data-n-head="ssr" rel="apple-touch-icon" href="../../style/icons/icon_512.png" sizes="512x512">

<!-- Meta关键字定义 -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

</head>
<body>
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container"> <span class="skiplink-text">跳到主体内容</span> </div>
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <a class="navbar-brand mr-0 mr-md-2" href="../" aria-label="Bootstrap">
  <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false">
    <title>Bootstrap</title>
    <path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/>
    <path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/>
  </svg>
  </a>
  <div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item"><a class="nav-link " href="../">首页</a></li>
      <li class="nav-item"><a class="nav-link" href="index.html">中文手册</a></li>
      <li class="nav-item"><a class="nav-link active" href="../components">组件</a></li>
      <li class="nav-item"><a class="nav-link " href="../directives">指令</a></li>
      <li class="nav-item"><a class="nav-link " href="../reference">参考</a></li>
      <li class="nav-item"><a class="nav-link " href="https://bootstrap-vue.org/play" target="_blank">体验</a></li>
      <li class="nav-item"><a class="nav-link " href="http://code.z01.com/v4"><i class="zi zi_bold" zico="粗"></i> Boostrap</a></li>
      <li class="nav-item"><a class="nav-link" href="http://ico.z01.com" target="_blank" rel="noopener">zico图标系统</a></li>
      <li class="nav-item"><a class="nav-link" href="http://www.z01.com" target="_blank" rel="noopener">Zoomla!逐浪CMS</a></li>
    </ul>
  </div>
  <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
    <li class="nav-item dropdown"> <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="alse"> v2.12.0 </a>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions"> 
        <a class="dropdown-item active" href="../../../bootstrap-vue/docs/4.0/">Latest (4.3.x)</a>
        <a class="dropdown-item" href="/Boot/">v3.3.7</a>
        <a class="dropdown-item" href="/Sass/">Sass语言</a>
        <a class="dropdown-item" href="/Emmet/">Emmet语法</a>
        <a class="dropdown-item" href="//www.z01.com/tool/" target="_blank">IIS站长工具</a>
        <a class="dropdown-item" href="//ad.z01.com/" target="_blank">广告源码</a>
        <a class="dropdown-item" href="//v.z01.com/mb/" target="_blank">免费模板</a>
        <a class="dropdown-item" href="//v.z01.com/" target="_blank">H5移动创作</a>
        <a class="dropdown-item" href="//www.z01.com/help/web/3234.shtml" target="_blank">Flexbox布局</a>
		<a class="dropdown-item" href="/boot/font.html" target="_blank">Font Awesome</a>
</div>
    </li>
    <li class="nav-item"> <a class="nav-link p-2" href="//zoomla.github.io/bootstrap4-zhcn-documentation" target="_blank" rel="noopener" aria-label="GitHub">
      <svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false">
        <title>GitHub</title>
        <path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/>
      </svg>
      </a> </li>
    <li class="nav-item"> <a class="nav-link p-2" href="http://www.z01.com/blog/ren/3214.shtml" target="_blank" rel="noopener" aria-label="Slack">译者说</a></li>
  </ul>
  <a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="download.html">下载 Bootstrap</a> </header>

<div class="container-fluid">
  <div class="row flex-xl-nowrap">
    <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
      <form class="bd-search d-flex align-items-center">
        <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
        <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false">
          <title>Menu</title>
          <path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/>
        </svg>
        </button>
      </form>


<nav class="collapse bd-links" id="bd-docs-nav">
<div class=""><a href="../" class="bd-toc-link">首页</a></div>
<div class="bd-toc-item nuxt-link-exact-active "><a href="../../../bootstrap-vue/docs/" class="bd-toc-link  "> 起步 </a>
<ul class="nav bd-sidenav">
</ul>
</div>
<div class="bd-toc-item active"><a href="../../../bootstrap-vue/docs/components/" class="bd-toc-link nuxt-link-exact-active"> 组件 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/index.html" class="nav-link"> 组件目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/alert.html" class="nav-link"> 警告提示框(Alert) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 徽章(Badge) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 面包屑导航(Breadcrumb) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button.html" class="nav-link"> 按钮(Button) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-group.html" class="nav-link"> 按钮组(Button Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-toolbar.html" class="nav-link"> 按钮Toolbar(Button Toolbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/calendar.html" class="nav-link"> 日历组件(Calendar) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/card.html" class="nav-link"> 卡片(Card) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/carousel.html" class="nav-link"> 轮播效果(Carousel) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/collapse.html" class="nav-link"> 折叠面板(Collapse) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/dropdown.html" class="nav-link"> 下拉菜单(Dropdown) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/embed.html" class="nav-link"> 嵌入(Embed) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form.html" class="nav-link"> 表单(Form) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-checkbox.html" class="nav-link"> 表单复选框(Form Checkbox) </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/components/form-datepicker.html" class="nav-link"> 表单时间选择器(Form Datepicker) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-file.html" class="nav-link"> 文件选择(Form File) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-group.html" class="nav-link"> 表单组合(Form Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-input.html" class="nav-link"> 表单输入框(Form Input) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-radio.html" class="nav-link"> 单选择表单Form Radio </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-select.html" class="nav-link"> 下拉式表单(Form Select) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-spinbutton.html" class="nav-link"> 按钮式表单(Form Spinbuttno) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-tags.html" class="nav-link"> Tags表单选择器(Form Tags) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-textarea.html" class="nav-link"> 文本框(Form Textarea) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-timepicker.html" class="nav-link"> 表单内时间控件(Form Timepicker) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/image.html" class="nav-link"> 图片(Image) </a></li>

<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/input-group.html" class="nav-link"> 输入框(Input Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/jumbotron.html" class="nav-link"> Hero大块屏(Jumbotron) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/layout.html" class="nav-link"> 布局与网络Layout and Grid System </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/link.html" class="nav-link"> 链接(Link)</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/list-group.html" class="nav-link"> 列表组(List group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/media.html" class="nav-link"> 媒体(Media) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/modal.html" class="nav-link"> 弹出模态框(Modal) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/nav.html" class="nav-link"> 导航(Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/navbar.html" class="nav-link"> 导航栏(Navbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination.html" class="nav-link"> 分页(Pagination) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination-nav.html" class="nav-link"> 分页导航(Pagination Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/popover.html" class="nav-link"> 指示备注(Popover) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/progress.html" class="nav-link"> 进度指示器(Progress) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/spinner.html" class="nav-link"> 旋转指示器(Spinner) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/table.html" class="nav-link"> 表格(Table) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tabs.html" class="nav-link"> 选项卡(Tabs) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/time.html" class="nav-link"> 时间组件(Time) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/toast.html" class="nav-link"> 冒泡推送(Toasts) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tooltip.html" class="nav-link"> tip提示组件(Tooltip) </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/directives/" class="bd-toc-link"> 指令 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/index.html" class="nav-link"> 指令目录 </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/directives/hover.html" class="nav-link"> Hover 指令<small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/popover.html" class="nav-link"> Popover 提示备注</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/scrollspy.html" class="nav-link"> Scrollspy 滚动监听</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/tooltip.html" class="nav-link"> Tooltip 提示指令</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/visible.html" class="nav-link"> Visible 可见性操作<small class="badge text-uppercase badge-success">New</small> </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/icons.html" class="bd-toc-link"> Icons图标</a>
<ul class="nav bd-sidenav">
</ul>
</div>
  
<div class="bd-toc-item"><a class="bd-toc-link" href="../../../bootstrap-vue/docs/reference">参考</a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference" class="nav-link.html"> 参考目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/accessibility.html" class="nav-link">友好访问</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/color-variants.html" class="nav-link">Color颜色变量 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/images.html" class="nav-link"> 组件图像img的src路径解析</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/router-links.html" class="nav-link"> Router路由支持 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/size-props.html" class="nav-link">大小规格</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/spacing-classes.html" class="nav-link">间距处理</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/starter-templates.html" class="nav-link">开始模板</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/theming.html" class="nav-link">主题色彩</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/utility-classes.html" class="nav-link">通用Class类</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/validation.html" class="nav-link">Form表单验证</a></li>
</ul>
</div>
<div class=""><a href="https://bootstrap-vue.org/play" class="bd-toc-link" target="_blank">在线模拟器</a></div>
</nav>
</div>

<div class="d-none d-xl-block col-xl-2 bd-toc">

<ul class="section-nav">
<li class="nav-item toc-entry mb-2"><a target="_self" href="#form-datepicker" class="nav-link font-weight-bold"><span>表单时间选择器(Form Datepicker)</span></a></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#v-model-return-value" class="nav-link"><span>v-model 返回值</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#disabled-and-readonly-states" class="nav-link"><span>禁用和只读状态</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#date-constraints" class="nav-link"><span>日期限制</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#minimum-and-maximum-dates" class="nav-link"><span>最小和最大日期</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#disabling-dates" class="nav-link"><span>禁用日期</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#validation-states" class="nav-link"><span>验证状态</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#styling" class="nav-link"><span>式样</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#variants" class="nav-link"><span>变量</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#control-sizing" class="nav-link"><span>控制尺寸</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#placeholder" class="nav-link"><span>占位符</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#optional-controls" class="nav-link"><span>可选控件</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#dropdown-placement" class="nav-link"><span>下拉位置</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#dark-mode" class="nav-link"><span>暗模式</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#internationalization" class="nav-link"><span>国际化</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#accessibility" class="nav-link"><span>辅助功能</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#implementation-notes" class="nav-link"><span>实施说明</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#see-also" class="nav-link"><span>另请参阅</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#component-reference" class="nav-link"><span>组件参考</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-form-datepicker" class="nav-link"><span>&lt;b-form-datepicker&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-individual-components" class="nav-link"><span>导入单个组件</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-as-a-plugin" class="nav-link"><span>导入为Vue.js插件</span></a></li>
</ul>
</li>
</ul>
</div>

<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">

<nav data-v-aafc4aea="" aria-label="Breadcrumbs" class="float-left mt-2 mb-0 mb-lg-2">
<ol data-v-aafc4aea="" class="breadcrumb d-inline-flex bg-transparent px-2 py-1 my-0">
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../" class="nuxt-link-active" target="_self">首页</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs" class="nuxt-link-active" target="_self">中文手册</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs/components/" class="nuxt-link-active" target="_self">组件</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item active"><span data-v-aafc4aea="" aria-current="location">表单时间选择器</span></li>
</ol>
</nav>
<div class="clearfix d-block"></div>
  <h1 class="bd-title" id="content">表单时间选择器(Form Datepicker)</h1>
<p class="bd-lead"><code translate="no" class="notranslate text-nowrap">&lt;b-form-datepicker&gt;</code> 是 BootstrapVue 定制日期选择器输入表单控件，它提供完整的WAI-ARIA合规性和国际化支持。</p>
  <script type="text/javascript" src="../../../v4/assets/js/pupCMS.js"></script>




<nav class="bd-quick-links mb-3 d-xl-none" data-v-811345e6="">
<header data-v-811345e6="">
<button data-v-811345e6="" type="button" class="btn font-weight-bold btn-outline-secondary btn-sm btn-block collapsed" aria-controls="bd-quick-links-collapse" aria-expanded="false"><span data-v-811345e6="">Show</span> page table of contents </button>
</header>
<ul data-v-811345e6="" id="bd-quick-links-collapse" class="collapse" style="display: none;">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#v-model-return-value" class=""><span data-v-811345e6="">v-model return value</span></a> <!----></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#disabled-and-readonly-states" class=""><span data-v-811345e6="">Disabled and readonly states</span></a> <!----></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#date-constraints" class=""><span data-v-811345e6="">Date constraints</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#minimum-and-maximum-dates" class=""><span data-v-811345e6="">Minimum and maximum dates</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#disabling-dates" class=""><span data-v-811345e6="">Disabling dates</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#validation-states" class=""><span data-v-811345e6="">Validation states</span></a> <!----></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#styling" class=""><span data-v-811345e6="">Styling</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#variants" class=""><span data-v-811345e6="">Variants</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#control-sizing" class=""><span data-v-811345e6="">Control sizing</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#placeholder" class=""><span data-v-811345e6="">Placeholder</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#optional-controls" class=""><span data-v-811345e6="">Optional controls</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#dropdown-placement" class=""><span data-v-811345e6="">Dropdown placement</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#dark-mode" class=""><span data-v-811345e6="">Dark mode</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#internationalization" class=""><span data-v-811345e6="">Internationalization</span></a> <!----></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#accessibility" class=""><span data-v-811345e6="">Accessibility</span></a> <!----></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#implementation-notes" class=""><span data-v-811345e6="">Implementation notes</span></a> <!----></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#see-also" class=""><span data-v-811345e6="">See also</span></a> <!----></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#component-reference" class=""><span data-v-811345e6="">Component reference</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-form-datepicker" class=""><span data-v-811345e6="">&lt;b-form-datepicker&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-individual-components" class=""><span data-v-811345e6="">Importing individual components</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-as-a-plugin" class=""><span data-v-811345e6="">Importing as a Vue.js plugin</span></a></li>
</ul>
</li>
</ul>
</nav>
<p>作为 <a href="../../../bootstrap-vue/docs/components/calendar" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-calendar&gt;</code></a> 组件的表单控件包装器组件，它提供了附加的验证状态表示形式和紧凑的接口。原始 HTML5 日期输入在表示形式，可访问性方面有所不同，并且在某些情况下并非所有浏览器都支持。<code translate="no" class="notranslate text-nowrap">&lt;b-form-datepicker&gt;</code> 在所有浏览器平台和设备上提供一致且可访问的界面。</p>
<p><code translate="no" class="notranslate text-nowrap">&lt;b-form-datepicker&gt;</code> 组件在 BootstrapVue 发行版 <code translate="no" class="notranslate text-nowrap">v2.5.0</code> 中引入。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-datepicker notranslate">
<div>
<label for="example-datepicker">Choose a date</label>
<div id="example-datepicker__b-form-date_" role="group" aria-labelledby="example-datepicker__value_" dir="ltr" class="b-form-datepicker form-control dropdown h-auto p-0 d-flex mb-2">
<button id="example-datepicker" type="button" aria-haspopup="dialog" aria-expanded="false" class="btn border-0 h-auto py-0">
<div aria-hidden="true">
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-calendar b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M16 2H4a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V4a2 2 0 00-2-2zM3 5.857C3 5.384 3.448 5 4 5h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H4c-.552 0-1-.384-1-.857V5.857z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M8.5 9a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
<!---->
<div id="example-datepicker__dialog_" role="dialog" aria-modal="false" aria-labelledby="example-datepicker__value_" class="dropdown-menu p-2"><!----></div>
<label id="example-datepicker__value_" for="example-datepicker" dir="ltr" class="form-control text-break text-wrap border-0 bg-transparent h-auto pl-1 m-0 text-muted" lang="zh-CN">No date selected<!----></label>
</div>
<p>Value: ''</p>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"example-datepicker"</span>&gt;</span>Choose a date<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-datepicker</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example-datepicker"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-datepicker</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Value: '{{ value }}'<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">value</span>: <span class="hljs-string">''</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<p><code translate="no" class="notranslate text-nowrap">&lt;b-form-datepicker&gt;</code> 支持 <a href="../../../bootstrap-vue/docs/components/calendar" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-calendar&gt;</code></a> 上可用的许多道具，以及 <a href="../../../bootstrap-vue/docs/components/dropdown" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-dropdown&gt;</code></a> 上可用的一些属性 。</p>
<h2 id="v-model-return-value" class="bv-no-focus-ring"><span class="bd-content-title"><code translate="no" class="notranslate text-nowrap">v-model</code> 返回值<a class="anchorjs-link" href="#v-model-return-value" aria-labelledby="v-model-return-value"></a></span></h2>
<p>默认情况下，<code translate="no" class="notranslate text-nowrap">&lt;b-form-datepicker&gt;</code> 以 <code translate="no" class="notranslate text-nowrap">YYYY-MM-DD</code> 格式返回日期作为字符串，该格式与本机浏览器 <code translate="no" class="notranslate text-nowrap">&lt;input type="date"&gt;</code> 控件返回的格式相同。您可以让 <code translate="no" class="notranslate text-nowrap">&lt;b-form-datepicker&gt;</code> 返回 <code translate="no" class="notranslate text-nowrap">Date</code> 对象（没有时间部分）作为 <code translate="no" class="notranslate text-nowrap">v-model</code> 值，而不是通过设置 <code translate="no" class="notranslate text-nowrap">value-as-date</code> 属性。</p>
<p>如果未选择任何日期，则 <code translate="no" class="notranslate text-nowrap">&lt;b-form-datepicker&gt;</code> 返回空字符串 <code translate="no" class="notranslate text-nowrap">''</code> ，如果设置了 <code translate="no" class="notranslate text-nowrap">value-as-date</code> 属性，则返回 <code translate="no" class="notranslate text-nowrap">null</code> 。</p>
<p>请注意，设置了 <code translate="no" class="notranslate text-nowrap">value-as-date</code> 属性后，返回的 <code translate="no" class="notranslate text-nowrap">Date</code> 对象将位于浏览器的默认时区。</p>
<p>如果 <code translate="no" class="notranslate text-nowrap">&lt;b-form-datepicker&gt;</code> 为 <code translate="no" class="notranslate text-nowrap">name</code> 属性设置了值，则将创建一个隐藏的输入，其名称属性设置为 <code translate="no" class="notranslate text-nowrap">name</code> 属性的值，并且value属性将设置为所选日期，例如 <code translate="no" class="notranslate text-nowrap">YYYY-MM-DD</code> 字符串。这将允许 <code translate="no" class="notranslate text-nowrap">&lt;b-form-datepicker&gt;</code> 选择的值通过本机浏览器表单提交来提交。</p>
<h2 id="disabled-and-readonly-states" class="bv-no-focus-ring"><span class="bd-content-title">禁用和只读状态<a class="anchorjs-link" href="#disabled-and-readonly-states" aria-labelledby="disabled-and-readonly-states"></a></span></h2>
<p>设置 <code translate="no" class="notranslate text-nowrap">disabled</code> 属性将删除 <code translate="no" class="notranslate text-nowrap">&lt;b-form-datepicker&gt;</code> 组件的所有交互性。</p>
<p>设置 <code translate="no" class="notranslate text-nowrap">readonly</code> 道具将禁用选择日期，但将保持组件的交互性，允许日期导航。<code translate="no" class="notranslate text-nowrap">v-model</code> 不会以只读状态更新。</p>
<p>要禁用特定日期或设置最小和最大日期限制，请参阅 <a href="#date-constraints" class="font-weight-bold">Date constraints</a>【日期限制】部分。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-datepicker-disabled-readonly notranslate">
<div>
<fieldset class="form-group" id="__BVID__3547">
<legend tabindex="-1" class="bv-no-focus-ring col-form-label pt-0" id="__BVID__3547__BV_label_">Select date picker interactive state</legend>
<div tabindex="-1" role="group" class="bv-no-focus-ring">
<div role="radiogroup" tabindex="-1" class="bv-no-focus-ring" aria-controls="ex-disabled-readonly" id="__BVID__3548">
<div class="custom-control custom-control-inline custom-radio">
<input type="radio" autocomplete="off" class="custom-control-input" value="disabled" id="__BVID__3549" name="__BVID__3548">
<label class="custom-control-label" for="__BVID__3549">Disabled</label>
</div>
<div class="custom-control custom-control-inline custom-radio">
<input type="radio" autocomplete="off" class="custom-control-input" value="readonly" id="__BVID__3550" name="__BVID__3548">
<label class="custom-control-label" for="__BVID__3550">Readonly</label>
</div>
<div class="custom-control custom-control-inline custom-radio">
<input type="radio" autocomplete="off" class="custom-control-input" value="normal" id="__BVID__3551" name="__BVID__3548">
<label class="custom-control-label" for="__BVID__3551">Normal</label>
</div>
</div>
<!----><!----><!----></div>
</fieldset>
<div id="ex-disabled-readonly__b-form-date_" role="group" aria-disabled="true" aria-labelledby="ex-disabled-readonly__value_" dir="ltr" class="b-form-datepicker form-control dropdown h-auto p-0 d-flex">
<button id="ex-disabled-readonly" type="button" disabled="disabled" aria-haspopup="dialog" aria-expanded="false" class="btn border-0 h-auto py-0">
<div aria-hidden="true">
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-calendar b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M16 2H4a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V4a2 2 0 00-2-2zM3 5.857C3 5.384 3.448 5 4 5h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H4c-.552 0-1-.384-1-.857V5.857z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M8.5 9a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
<!---->
<div id="ex-disabled-readonly__dialog_" role="dialog" aria-modal="false" aria-labelledby="ex-disabled-readonly__value_" class="dropdown-menu p-2"><!----></div>
<label id="ex-disabled-readonly__value_" for="ex-disabled-readonly" dir="ltr" class="form-control text-break text-wrap border-0 bg-transparent h-auto pl-1 m-0 text-muted" lang="zh-CN">No date selected<!----></label>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"Select date picker interactive state"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-radio-group</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"state"</span> <span class="hljs-attr">aria-controls</span>=<span class="hljs-string">"ex-disabled-readonly"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-form-radio</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"disabled"</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-radio</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-form-radio</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"readonly"</span>&gt;</span>Readonly<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-radio</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-form-radio</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"normal"</span>&gt;</span>Normal<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-radio</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-radio-group</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-datepicker</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"ex-disabled-readonly"</span> <span class="hljs-attr">:disabled</span>=<span class="hljs-string">"disabled"</span> <span class="hljs-attr">:readonly</span>=<span class="hljs-string">"readonly"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-datepicker</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">state</span>: <span class="hljs-string">'disabled'</span>
      }
    },
    <span class="hljs-attr">computed</span>: {
      disabled() {
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.state === <span class="hljs-string">'disabled'</span>
      },
      readonly() {
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.state === <span class="hljs-string">'readonly'</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<h2 id="date-constraints" class="bv-no-focus-ring"><span class="bd-content-title">日期限制<a class="anchorjs-link" href="#date-constraints" aria-labelledby="date-constraints"></a></span></h2>
<h3 id="minimum-and-maximum-dates" class="bv-no-focus-ring"><span class="bd-content-title">最小和最大日期<a class="anchorjs-link" href="#minimum-and-maximum-dates" aria-labelledby="minimum-and-maximum-dates"></a></span></h3>
<p>通过 <code translate="no" class="notranslate text-nowrap">min</code> 和 <code translate="no" class="notranslate text-nowrap">max</code> 属性限制日历范围。 道具接受 <code translate="no" class="notranslate text-nowrap">YYYY-MM-DD</code> 格式的日期字符串或 <code translate="no" class="notranslate text-nowrap">Date</code> 对象。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-datepicker-min-max notranslate">
<div>
<div role="group" dir="ltr" class="b-form-datepicker form-control dropdown h-auto p-0 d-flex" id="__BVID__3555__b-form-date_" aria-labelledby="__BVID__3555__value_">
<button type="button" aria-haspopup="dialog" aria-expanded="false" class="btn border-0 h-auto py-0" id="__BVID__3555">
<div aria-hidden="true">
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-calendar b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M16 2H4a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V4a2 2 0 00-2-2zM3 5.857C3 5.384 3.448 5 4 5h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H4c-.552 0-1-.384-1-.857V5.857z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M8.5 9a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
<!---->
<div role="dialog" aria-modal="false" class="dropdown-menu p-2" id="__BVID__3555__dialog_" aria-labelledby="__BVID__3555__value_"><!----></div>
<label dir="ltr" class="form-control text-break text-wrap border-0 bg-transparent h-auto pl-1 m-0 text-muted" id="__BVID__3555__value_" for="__BVID__3555" lang="en">No date selected<!----></label>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-datepicker</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value"</span> <span class="hljs-attr">:min</span>=<span class="hljs-string">"min"</span> <span class="hljs-attr">:max</span>=<span class="hljs-string">"max"</span> <span class="hljs-attr">locale</span>=<span class="hljs-string">"en"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-datepicker</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">const</span> now = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>()
      <span class="hljs-keyword">const</span> today = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(now.getFullYear(), now.getMonth(), now.getDate())
      <span class="hljs-comment">// 15th two months prior</span>
      <span class="hljs-keyword">const</span> minDate = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(today)
      minDate.setMonth(minDate.getMonth() - <span class="hljs-number">2</span>)
      minDate.setDate(<span class="hljs-number">15</span>)
      <span class="hljs-comment">// 15th in two months</span>
      <span class="hljs-keyword">const</span> maxDate = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(today)
      maxDate.setMonth(maxDate.getMonth() + <span class="hljs-number">2</span>)
      maxDate.setDate(<span class="hljs-number">15</span>)

      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">value</span>: <span class="hljs-string">''</span>,
        <span class="hljs-attr">min</span>: minDate,
        <span class="hljs-attr">max</span>: maxDate
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<h3 id="disabling-dates" class="bv-no-focus-ring"><span class="bd-content-title">禁用日期<a class="anchorjs-link" href="#disabling-dates" aria-labelledby="disabling-dates"></a></span></h3>
<p>如果需要在日期选择器中禁用特定日期，请指定对 <code translate="no" class="notranslate text-nowrap">date-disabled-fn</code> 道具的函数引用。该函数传递两个参数：</p>
<ul>
<li><code translate="no" class="notranslate text-nowrap">ymd</code> 日期为 <code translate="no" class="notranslate text-nowrap">YYYY-MM-DD</code> 字符串</li>
<li><code translate="no" class="notranslate text-nowrap">date</code> 日期作为 <code translate="no" class="notranslate text-nowrap">Date</code> 对象</li>
</ul>
<p>如果 <em>不能</em> 选择（禁用）日期，则该函数应返回 <code translate="no" class="notranslate text-nowrap">true</code> ；如果可以选择（启用）日期，则该函数应返回 <code translate="no" class="notranslate text-nowrap">false</code> 。请注意，<em>该</em> 函数 <strong>不能</strong> 是异步的，应该尽快返回一个值。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-datepicker-disabled-dates notranslate">
<div>
<div role="group" dir="ltr" class="b-form-datepicker form-control dropdown h-auto p-0 d-flex" id="__BVID__3558__b-form-date_" aria-labelledby="__BVID__3558__value_">
<button type="button" aria-haspopup="dialog" aria-expanded="false" class="btn border-0 h-auto py-0" id="__BVID__3558">
<div aria-hidden="true">
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-calendar b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M16 2H4a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V4a2 2 0 00-2-2zM3 5.857C3 5.384 3.448 5 4 5h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H4c-.552 0-1-.384-1-.857V5.857z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M8.5 9a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
<!---->
<div role="dialog" aria-modal="false" class="dropdown-menu p-2" id="__BVID__3558__dialog_" aria-labelledby="__BVID__3558__value_"><!----></div>
<label dir="ltr" class="form-control text-break text-wrap border-0 bg-transparent h-auto pl-1 m-0 text-muted" id="__BVID__3558__value_" for="__BVID__3558" lang="en">No date selected<!----></label>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-datepicker</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value"</span> <span class="hljs-attr">:date-disabled-fn</span>=<span class="hljs-string">"dateDisabled"</span> <span class="hljs-attr">locale</span>=<span class="hljs-string">"en"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-datepicker</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">value</span>: <span class="hljs-string">''</span>
      }
    },
    <span class="hljs-attr">methods</span>: {
      dateDisabled(ymd, date) {
        <span class="hljs-comment">// Disable weekends (Sunday = `0`, Saturday = `6`) and</span>
        <span class="hljs-comment">// disable days that fall on the 13th of the month</span>
        <span class="hljs-keyword">const</span> weekday = date.getDay()
        <span class="hljs-keyword">const</span> day = date.getDate()
        <span class="hljs-comment">// Return `true` if the date should be disabled</span>
        <span class="hljs-keyword">return</span> weekday === <span class="hljs-number">0</span> || weekday === <span class="hljs-number">6</span> || day === <span class="hljs-number">13</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<p>请注意，在 <code translate="no" class="notranslate text-nowrap">date-disabled-fn</code> 之前，首先评估 <code translate="no" class="notranslate text-nowrap">min</code> 和 <code translate="no" class="notranslate text-nowrap">max</code> 日期约束。</p>
<h2 id="validation-states" class="bv-no-focus-ring"><span class="bd-content-title">验证状态<a class="anchorjs-link" href="#validation-states" aria-labelledby="validation-states"></a></span></h2>
<p><code translate="no" class="notranslate text-nowrap">&lt;b-form-datepicker&gt;</code> 通过布尔 <code translate="no" class="notranslate text-nowrap">state</code> 属性支持无效和有效的样式。将 <code translate="no" class="notranslate text-nowrap">state</code> 设置为 boolean <code translate="no" class="notranslate text-nowrap">false</code> 会将输入设置为无效，而将其设置为 boolean <code translate="no" class="notranslate text-nowrap">true</code> 会将其设置为有效。将 <code translate="no" class="notranslate text-nowrap">state</code> 设置为 <code translate="no" class="notranslate text-nowrap">null</code> 不会显示任何验证状态样式（默认）。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-datepicker-invalid-valid notranslate">
<div>
<label for="datepicker-invalid">Choose a date (invalid style)</label>
<div id="datepicker-invalid__b-form-date_" role="group" aria-labelledby="datepicker-invalid__value_" aria-invalid="true" dir="ltr" class="b-form-datepicker form-control dropdown h-auto p-0 d-flex mb-2 is-invalid">
<button id="datepicker-invalid" type="button" aria-haspopup="dialog" aria-expanded="false" aria-invalid="true" class="btn border-0 h-auto py-0">
<div aria-hidden="true">
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-calendar b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M16 2H4a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V4a2 2 0 00-2-2zM3 5.857C3 5.384 3.448 5 4 5h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H4c-.552 0-1-.384-1-.857V5.857z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M8.5 9a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
<!---->
<div id="datepicker-invalid__dialog_" role="dialog" aria-modal="false" aria-labelledby="datepicker-invalid__value_" class="dropdown-menu p-2"><!----></div>
<label id="datepicker-invalid__value_" for="datepicker-invalid" dir="ltr" aria-invalid="true" class="form-control text-break text-wrap border-0 bg-transparent h-auto pl-1 m-0 text-muted is-invalid" lang="zh-CN">No date selected<!----></label>
</div>
<label for="datepicker-valid">Choose a date (valid style)</label>
<div id="datepicker-valid__b-form-date_" role="group" aria-labelledby="datepicker-valid__value_" dir="ltr" class="b-form-datepicker form-control dropdown h-auto p-0 d-flex is-valid">
<button id="datepicker-valid" type="button" aria-haspopup="dialog" aria-expanded="false" class="btn border-0 h-auto py-0">
<div aria-hidden="true">
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-calendar b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M16 2H4a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V4a2 2 0 00-2-2zM3 5.857C3 5.384 3.448 5 4 5h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H4c-.552 0-1-.384-1-.857V5.857z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M8.5 9a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
<!---->
<div id="datepicker-valid__dialog_" role="dialog" aria-modal="false" aria-labelledby="datepicker-valid__value_" class="dropdown-menu p-2"><!----></div>
<label id="datepicker-valid__value_" for="datepicker-valid" dir="ltr" class="form-control text-break text-wrap border-0 bg-transparent h-auto pl-1 m-0 text-muted is-valid" lang="zh-CN">No date selected<!----></label>
</div>
</div>
</div>
<figure class="highlight">
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"datepicker-invalid"</span>&gt;</span>Choose a date (invalid style)<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-datepicker</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"datepicker-invalid"</span> <span class="hljs-attr">:state</span>=<span class="hljs-string">"false"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-datepicker</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"datepicker-valid"</span>&gt;</span>Choose a date (valid style)<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-datepicker</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"datepicker-valid"</span> <span class="hljs-attr">:state</span>=<span class="hljs-string">"true"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-datepicker</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></pre></figure>
<p>请注意，本机浏览器验证 <em>不</em> 适用于 <code translate="no" class="notranslate text-nowrap">&lt;b-form-datepicker&gt;</code> 。</p>
<h2 id="styling" class="bv-no-focus-ring"><span class="bd-content-title">式样<a class="anchorjs-link" href="#styling" aria-labelledby="styling"></a></span></h2>
<h3 id="variants" class="bv-no-focus-ring"><span class="bd-content-title">变量<a class="anchorjs-link" href="#variants" aria-labelledby="variants"></a></span></h3>
<p>选定的日期按钮（背景颜色）默认为 <code translate="no" class="notranslate text-nowrap">'primary'</code> 主题变量。您可以通过 <code translate="no" class="notranslate text-nowrap">selected-variant</code> 属性将其更改为任何 Bootstrap v4 主题变量颜色：<code translate="no" class="notranslate text-nowrap">'secondary'</code> ，<code translate="no" class="notranslate text-nowrap">'success'</code> ，<code translate="no" class="notranslate text-nowrap">'danger'</code> ，<code translate="no" class="notranslate text-nowrap">'warning'</code> ，<code translate="no" class="notranslate text-nowrap">'info'</code> 等等。</p>
<p>默认情况下，今天的日期也将使用与所选日期相同的变体突出显示（文本颜色）。若要指定用于今天日期的其他主题颜色，请使用 <code translate="no" class="notranslate text-nowrap">today-variant</code> 道具。</p>
<p>要完全禁用对今天日期的突出显示，请设置 <code translate="no" class="notranslate text-nowrap">no-highlight-today</code> 属性。</p>
<h3 id="control-sizing" class="bv-no-focus-ring"><span class="bd-content-title">控制尺寸<a class="anchorjs-link" href="#control-sizing" aria-labelledby="control-sizing"></a></span></h3>
<p>喜欢更大或更小的 <code translate="no" class="notranslate text-nowrap">&lt;b-form-datepicker&gt;</code> 控件吗？对于较小的表单控件，将 <code translate="no" class="notranslate text-nowrap">size</code> 属性设置为 <code translate="no" class="notranslate text-nowrap">'sm'</code> ，对于较大的表单控件，将大小属性设置为 <code translate="no" class="notranslate text-nowrap">'lg'</code> 。请注意，这不会影响弹出日历对话框的大小。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-datepicker-sizes notranslate">
<div>
<label for="datepicker-sm">Small date picker</label>
<div id="datepicker-sm__b-form-date_" role="group" aria-labelledby="datepicker-sm__value_" dir="ltr" class="b-form-datepicker form-control dropdown h-auto p-0 d-flex mb-2 form-control-sm" local="en">
<button id="datepicker-sm" type="button" aria-haspopup="dialog" aria-expanded="false" class="btn border-0 h-auto py-0 btn-sm">
<div aria-hidden="true">
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-calendar b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M16 2H4a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V4a2 2 0 00-2-2zM3 5.857C3 5.384 3.448 5 4 5h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H4c-.552 0-1-.384-1-.857V5.857z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M8.5 9a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
<!---->
<div id="datepicker-sm__dialog_" role="dialog" aria-modal="false" aria-labelledby="datepicker-sm__value_" class="dropdown-menu p-2"><!----></div>
<label id="datepicker-sm__value_" for="datepicker-sm" dir="ltr" class="form-control text-break text-wrap border-0 bg-transparent h-auto pl-1 m-0 text-muted form-control-sm" lang="zh-CN">No date selected<!----></label>
</div>
<label for="datepicker-lg">Large date picker</label>
<div id="datepicker-lg__b-form-date_" role="group" aria-labelledby="datepicker-lg__value_" dir="ltr" class="b-form-datepicker form-control dropdown h-auto p-0 d-flex form-control-lg" local="en">
<button id="datepicker-lg" type="button" aria-haspopup="dialog" aria-expanded="false" class="btn border-0 h-auto py-0 btn-lg">
<div aria-hidden="true">
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-calendar b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M16 2H4a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V4a2 2 0 00-2-2zM3 5.857C3 5.384 3.448 5 4 5h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H4c-.552 0-1-.384-1-.857V5.857z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M8.5 9a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
<!---->
<div id="datepicker-lg__dialog_" role="dialog" aria-modal="false" aria-labelledby="datepicker-lg__value_" class="dropdown-menu p-2"><!----></div>
<label id="datepicker-lg__value_" for="datepicker-lg" dir="ltr" class="form-control text-break text-wrap border-0 bg-transparent h-auto pl-1 m-0 text-muted form-control-lg" lang="zh-CN">No date selected<!----></label>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"datepicker-sm"</span>&gt;</span>Small date picker<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-datepicker</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"datepicker-sm"</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span> <span class="hljs-attr">local</span>=<span class="hljs-string">"en"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-datepicker</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"datepicker-lg"</span>&gt;</span>Large date picker<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-datepicker</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"datepicker-lg"</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"lg"</span> <span class="hljs-attr">local</span>=<span class="hljs-string">"en"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-datepicker</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></pre></figure>
<h3 id="placeholder" class="bv-no-focus-ring"><span class="bd-content-title">占位符<a class="anchorjs-link" href="#placeholder" aria-labelledby="placeholder"></a></span></h3>
<p>如果未选择日期，则通过 <code translate="no" class="notranslate text-nowrap">placeholder</code>【占位符】属性将自定义占位符文本添加到控件中。如果未提供占位符，则使用 <code translate="no" class="notranslate text-nowrap">label-no-date-selected</code> 属性的值。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-datepicker-placeholder notranslate">
<div>
<label for="datepicker-placeholder">Date picker with placeholder</label>
<div id="datepicker-placeholder__b-form-date_" role="group" aria-labelledby="datepicker-placeholder__value_" dir="ltr" class="b-form-datepicker form-control dropdown h-auto p-0 d-flex" local="en">
<button id="datepicker-placeholder" type="button" aria-haspopup="dialog" aria-expanded="false" class="btn border-0 h-auto py-0">
<div aria-hidden="true">
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-calendar b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M16 2H4a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V4a2 2 0 00-2-2zM3 5.857C3 5.384 3.448 5 4 5h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H4c-.552 0-1-.384-1-.857V5.857z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M8.5 9a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
<!---->
<div id="datepicker-placeholder__dialog_" role="dialog" aria-modal="false" aria-labelledby="datepicker-placeholder__value_" class="dropdown-menu p-2"><!----></div>
<label id="datepicker-placeholder__value_" for="datepicker-placeholder" dir="ltr" class="form-control text-break text-wrap border-0 bg-transparent h-auto pl-1 m-0 text-muted" lang="zh-CN">Choose a date<!----></label>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"datepicker-placeholder"</span>&gt;</span>Date picker with placeholder<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-datepicker</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"datepicker-placeholder"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Choose a date"</span> <span class="hljs-attr">local</span>=<span class="hljs-string">"en"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-datepicker</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></pre></figure>
<h3 id="optional-controls" class="bv-no-focus-ring"><span class="bd-content-title">可选控件<a class="anchorjs-link" href="#optional-controls" aria-labelledby="optional-controls"></a></span></h3>
<p>通过 <code translate="no" class="notranslate text-nowrap">today-button</code> ，<code translate="no" class="notranslate text-nowrap">reset-button</code> 和 <code translate="no" class="notranslate text-nowrap">close-button</code> ，将可选的控制按钮添加到日历弹出窗口的底部。</p>
<ul>
<li>today button 选择今天的日期</li>
<li>重置按钮将清除所选日期，或将日期设置为 <code translate="no" class="notranslate text-nowrap">reset-value</code> 属性的值（如果提供）</li>
<li>close button 关闭日历弹出窗口</li>
</ul>
<p>默认情况下，单击 “today” 或 “reset” 按钮也将关闭日历弹出窗口，除非设置了 <code translate="no" class="notranslate text-nowrap">no-close-on-select</code> 属性选项。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-datepicker-buttons notranslate">
<div>
<label for="datepicker-buttons">Date picker with optional footer buttons</label>
<div id="datepicker-buttons__b-form-date_" role="group" aria-labelledby="datepicker-buttons__value_" dir="ltr" class="b-form-datepicker form-control dropdown h-auto p-0 d-flex">
<button id="datepicker-buttons" type="button" aria-haspopup="dialog" aria-expanded="false" class="btn border-0 h-auto py-0">
<div aria-hidden="true">
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-calendar b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M16 2H4a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V4a2 2 0 00-2-2zM3 5.857C3 5.384 3.448 5 4 5h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H4c-.552 0-1-.384-1-.857V5.857z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M8.5 9a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
<!---->
<div id="datepicker-buttons__dialog_" role="dialog" aria-modal="false" aria-labelledby="datepicker-buttons__value_" class="dropdown-menu p-2"><!----></div>
<label id="datepicker-buttons__value_" for="datepicker-buttons" dir="ltr" class="form-control text-break text-wrap border-0 bg-transparent h-auto pl-1 m-0 text-muted" lang="en">No date selected<!----></label>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"datepicker-buttons"</span>&gt;</span>Date picker with optional footer buttons<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-datepicker</span>
      <span class="hljs-attr">id</span>=<span class="hljs-string">"datepicker-buttons"</span>
      <span class="hljs-attr">today-button</span>
      <span class="hljs-attr">reset-button</span>
      <span class="hljs-attr">close-button</span>
      <span class="hljs-attr">locale</span>=<span class="hljs-string">"en"</span>
    &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-datepicker</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></pre></figure>
<p>可选按钮的文本可以通过 <code translate="no" class="notranslate text-nowrap">label-today-button</code> ，<code translate="no" class="notranslate text-nowrap">label-reset-button</code> ，和
 <code translate="no" class="notranslate text-nowrap">label-close-button</code> 道具进行设置。由于页脚部分的宽度有限，建议使这些标签简短。</p>
<h3 id="dropdown-placement" class="bv-no-focus-ring"><span class="bd-content-title">下拉位置<a class="anchorjs-link" href="#dropdown-placement" aria-labelledby="dropdown-placement"></a></span></h3>
<p>使用下拉属性 <code translate="no" class="notranslate text-nowrap">right</code> ，<code translate="no" class="notranslate text-nowrap">dropup</code> ，<code translate="no" class="notranslate text-nowrap">dropright</code> ，<code translate="no" class="notranslate text-nowrap">dropleft</code> ，<code translate="no" class="notranslate text-nowrap">no-flip</code> ，和 <code translate="no" class="notranslate text-nowrap">offset</code> 来控制弹出日历的位置。</p>
<p>有关这些道具的效果和用法的详细信息，请参考 <a href="../../../bootstrap-vue/docs/components/dropdown" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-dropdown&gt;</code> documentation</a> 【文档】。</p>
<h3 id="dark-mode" class="bv-no-focus-ring"><span class="bd-content-title">暗模式<a class="anchorjs-link" href="#dark-mode" aria-labelledby="dark-mode"></a></span></h3>
<p>想要带有深色背景而非浅色背景的精美弹出窗口？将 <code translate="no" class="notranslate text-nowrap">dark</code> 属性设置为 <code translate="no" class="notranslate text-nowrap">true</code> 以启用深色背景。</p>
<h2 id="internationalization" class="bv-no-focus-ring"><span class="bd-content-title">国际化<a class="anchorjs-link" href="#internationalization" aria-labelledby="internationalization"></a></span></h2>
<p>通过 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat" target="_blank" rel="noopener"><code translate="no" class="notranslate text-nowrap">Intl.DateTimeFormat</code></a> 提供日期选择器日历的国际化，但应用于日历控件元素的标签（aria标签，所选状态和帮助文本）除外。您必须为这些标签提供自己的翻译。可用的语言环境取决于浏览器（并非所有浏览器都支持所有语言环境）</p>
<p>默认情况下，<code translate="no" class="notranslate text-nowrap">&lt;b-form-datepicker&gt;</code> 将使用浏览器的默认语言环境，但是您可以通过 <code translate="no" class="notranslate text-nowrap">locale</code>【地区】属性指定要使用的语言环境。该道具接受单个语言环境字符串或语言环境字符串数组（按首选语言环境的顺序列出）。</p>
<p>日历从星期天开始。可以通过将 <code translate="no" class="notranslate text-nowrap">start-weekday</code> 属性设置为 <code translate="no" class="notranslate text-nowrap">0</code> 到 <code translate="no" class="notranslate text-nowrap">6</code> 之间的数字来更改此值，其中 <code translate="no" class="notranslate text-nowrap">0</code> 代表星期日，星期一代表 <code translate="no" class="notranslate text-nowrap">1</code> ，星期六代表 <code translate="no" class="notranslate text-nowrap">6</code> 。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-datepicker-i18n notranslate">
<div>
<label for="example-locales">Locale:</label>
<select id="example-locales" class="mb-2 custom-select">
<option value="en-US">English US (en-US)</option>
<option value="de">German (de)</option>
<option value="ar-EG">Arabic Egyptian (ar-EG)</option>
<option value="zh">Chinese (zh)</option>
</select>
<label for="example-weekdays">Start weekday:</label>
<select id="example-weekdays" class="mb-2 custom-select">
<option value="0">Sunday</option>
<option value="1">Monday</option>
<option value="6">Saturday</option>
</select>
<label for="example-i18n-picker">Date picker:</label>
<div id="example-i18n-picker__b-form-date_" role="group" aria-labelledby="example-i18n-picker__value_" dir="ltr" class="b-form-datepicker form-control dropdown h-auto p-0 d-flex mb-2">
<button id="example-i18n-picker" type="button" aria-haspopup="dialog" aria-expanded="false" class="btn border-0 h-auto py-0">
<div aria-hidden="true">
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-calendar b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M16 2H4a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V4a2 2 0 00-2-2zM3 5.857C3 5.384 3.448 5 4 5h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H4c-.552 0-1-.384-1-.857V5.857z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M8.5 9a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
<!---->
<div id="example-i18n-picker__dialog_" role="dialog" aria-modal="false" aria-labelledby="example-i18n-picker__value_" class="dropdown-menu p-2"><!----></div>
<label id="example-i18n-picker__value_" for="example-i18n-picker" dir="ltr" class="form-control text-break text-wrap border-0 bg-transparent h-auto pl-1 m-0 text-muted" lang="en-US">No date selected<!----></label>
</div>
<p>Value: <b>''</b></p>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"example-locales"</span>&gt;</span>Locale:<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-select</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example-locales"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"locale"</span> <span class="hljs-attr">:options</span>=<span class="hljs-string">"locales"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-select</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"example-weekdays"</span>&gt;</span>Start weekday:<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-select</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example-weekdays"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"weekday"</span> <span class="hljs-attr">:options</span>=<span class="hljs-string">"weekdays"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-select</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"example-i18n-picker"</span>&gt;</span>Date picker:<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-datepicker</span>
      <span class="hljs-attr">id</span>=<span class="hljs-string">"example-i18n-picker"</span>
      <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value"</span>
      <span class="hljs-attr">v-bind</span>=<span class="hljs-string">"labels[locale] || {}"</span>
      <span class="hljs-attr">:locale</span>=<span class="hljs-string">"locale"</span>
      <span class="hljs-attr">:start-weekday</span>=<span class="hljs-string">"weekday"</span>
      <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2"</span>
     &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-datepicker</span>&gt;</span>
     <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Value: <span class="hljs-tag">&lt;<span class="hljs-name">b</span>&gt;</span>'{{ value }}'<span class="hljs-tag">&lt;/<span class="hljs-name">b</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
   <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">value</span>: <span class="hljs-string">''</span>,
        <span class="hljs-attr">locale</span>: <span class="hljs-string">'en-US'</span>,
        <span class="hljs-attr">locales</span>: [
          { <span class="hljs-attr">value</span>: <span class="hljs-string">'en-US'</span>, <span class="hljs-attr">text</span>: <span class="hljs-string">'English US (en-US)'</span> },
          { <span class="hljs-attr">value</span>: <span class="hljs-string">'de'</span>, <span class="hljs-attr">text</span>: <span class="hljs-string">'German (de)'</span> },
          { <span class="hljs-attr">value</span>: <span class="hljs-string">'ar-EG'</span>, <span class="hljs-attr">text</span>: <span class="hljs-string">'Arabic Egyptian (ar-EG)'</span> },
          { <span class="hljs-attr">value</span>: <span class="hljs-string">'zh'</span>, <span class="hljs-attr">text</span>: <span class="hljs-string">'Chinese (zh)'</span> }
        ],
        <span class="hljs-attr">weekday</span>: <span class="hljs-number">0</span>,
        <span class="hljs-attr">weekdays</span>: [
          { <span class="hljs-attr">value</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">text</span>: <span class="hljs-string">'Sunday'</span> },
          { <span class="hljs-attr">value</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">text</span>: <span class="hljs-string">'Monday'</span> },
          { <span class="hljs-attr">value</span>: <span class="hljs-number">6</span>, <span class="hljs-attr">text</span>: <span class="hljs-string">'Saturday'</span> }
        ],
        <span class="hljs-attr">labels</span>: {
          <span class="hljs-attr">de</span>: {
            <span class="hljs-attr">labelPrevYear</span>: <span class="hljs-string">'Vorheriges Jahr'</span>,
            <span class="hljs-attr">labelPrevMonth</span>: <span class="hljs-string">'Vorheriger Monat'</span>,
            <span class="hljs-attr">labelCurrentMonth</span>: <span class="hljs-string">'Aktueller Monat'</span>,
            <span class="hljs-attr">labelNextMonth</span>: <span class="hljs-string">'Nächster Monat'</span>,
            <span class="hljs-attr">labelNextYear</span>: <span class="hljs-string">'Nächstes Jahr'</span>,
            <span class="hljs-attr">labelToday</span>: <span class="hljs-string">'Heute'</span>,
            <span class="hljs-attr">labelSelected</span>: <span class="hljs-string">'Ausgewähltes Datum'</span>,
            <span class="hljs-attr">labelNoDateSelected</span>: <span class="hljs-string">'Kein Datum gewählt'</span>,
            <span class="hljs-attr">labelCalendar</span>: <span class="hljs-string">'Kalender'</span>,
            <span class="hljs-attr">labelNav</span>: <span class="hljs-string">'Kalendernavigation'</span>,
            <span class="hljs-attr">labelHelp</span>: <span class="hljs-string">'Mit den Pfeiltasten durch den Kalender navigieren'</span>
          },
          <span class="hljs-string">'ar-EG'</span>: {
            <span class="hljs-attr">labelPrevYear</span>: <span class="hljs-string">'العام السابق'</span>,
            <span class="hljs-attr">labelPrevMonth</span>: <span class="hljs-string">'الشهر السابق'</span>,
            <span class="hljs-attr">labelCurrentMonth</span>: <span class="hljs-string">'الشهر الحالي'</span>,
            <span class="hljs-attr">labelNextMonth</span>: <span class="hljs-string">'الشهر المقبل'</span>,
            <span class="hljs-attr">labelNextYear</span>: <span class="hljs-string">'العام المقبل'</span>,
            <span class="hljs-attr">labelToday</span>: <span class="hljs-string">'اليوم'</span>,
            <span class="hljs-attr">labelSelected</span>: <span class="hljs-string">'التاريخ المحدد'</span>,
            <span class="hljs-attr">labelNoDateSelected</span>: <span class="hljs-string">'لم يتم اختيار تاريخ'</span>,
            <span class="hljs-attr">labelCalendar</span>: <span class="hljs-string">'التقويم'</span>,
            <span class="hljs-attr">labelNav</span>: <span class="hljs-string">'الملاحة التقويم'</span>,
            <span class="hljs-attr">labelHelp</span>: <span class="hljs-string">'استخدم مفاتيح المؤشر للتنقل في التواريخ'</span>
          },
          <span class="hljs-attr">zh</span>: {
            <span class="hljs-attr">labelPrevYear</span>: <span class="hljs-string">'上一年'</span>,
            <span class="hljs-attr">labelPrevMonth</span>: <span class="hljs-string">'上个月'</span>,
            <span class="hljs-attr">labelCurrentMonth</span>: <span class="hljs-string">'当前月份'</span>,
            <span class="hljs-attr">labelNextMonth</span>: <span class="hljs-string">'下个月'</span>,
            <span class="hljs-attr">labelNextYear</span>: <span class="hljs-string">'明年'</span>,
            <span class="hljs-attr">labelToday</span>: <span class="hljs-string">'今天'</span>,
            <span class="hljs-attr">labelSelected</span>: <span class="hljs-string">'选定日期'</span>,
            <span class="hljs-attr">labelNoDateSelected</span>: <span class="hljs-string">'未选择日期'</span>,
            <span class="hljs-attr">labelCalendar</span>: <span class="hljs-string">'日历'</span>,
            <span class="hljs-attr">labelNav</span>: <span class="hljs-string">'日历导航'</span>,
            <span class="hljs-attr">labelHelp</span>: <span class="hljs-string">'使用光标键浏览日期'</span>
          }
        }
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<p>您可以侦听 <code translate="no" class="notranslate text-nowrap">context</code> 事件，以确定日历已解决的语言环境和方向性。</p>
<p>有关更多详细信息，请参考 <a href="../../../bootstrap-vue/docs/components/calendar#internationalization" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-calendar&gt;</code></a> 文档。</p>
<h2 id="accessibility" class="bv-no-focus-ring"><span class="bd-content-title">辅助功能<a class="anchorjs-link" href="#accessibility" aria-labelledby="accessibility"></a></span></h2>
<p>弹出日历支持与 <a href="../../../bootstrap-vue/docs/components/calendar#accessibility" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-calendar&gt;</code> 相同的键盘控件</a> ，以及以下内容：</p>
<ul>
<li><kbd class="notranslate" translate="no">ESC</kbd> 将关闭弹出日历而不选择日期</li>
</ul>
<p>在对日期选择器进行国际化时，还必须使用适当的翻译字符串更新 <code translate="no" class="notranslate text-nowrap">label-*</code> 属性，以便国际屏幕阅读器用户能够听到正确的提示和描述。</p>
<p>有关更多详细信息，请参考 <a href="../../../bootstrap-vue/docs/components/calendar#accessibility" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-calendar&gt;</code></a> 文档。</p>
<h2 id="implementation-notes" class="bv-no-focus-ring"><span class="bd-content-title">实施说明<a class="anchorjs-link" href="#implementation-notes" aria-labelledby="implementation-notes"></a></span></h2>
<p><code translate="no" class="notranslate text-nowrap">&lt;b-form-datepicker&gt;</code> 基于组件 <a href="../../../bootstrap-vue/docs/components/calendar" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-calendar&gt;</code></a> 和 <a href="../../../bootstrap-vue/docs/components/dropdown" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-dropdown&gt;</code></a> 。</p>
<p><code translate="no" class="notranslate text-nowrap">&lt;b-form-datepicker&gt;</code> 使用 Bootstrap 的 margin ，padding ，border 和 flex 实用程序类，以及按钮（<code translate="no" class="notranslate text-nowrap">btn-*</code>）类和 <code translate="no" class="notranslate text-nowrap">form-control*</code>（加验证）类。</p>
<p>日期选择器和日历的正确样式也需要 BootstrapVue 的自定义 SCSS / CSS。</p>
<h2 id="see-also" class="bv-no-focus-ring"><span class="bd-content-title">另请参阅<a class="anchorjs-link" href="#see-also" aria-labelledby="see-also"></a></span></h2>
<ul>
<li><a href="../../../bootstrap-vue/docs/components/calendar" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-calendar&gt;</code> 日历日期选择小部件</a></li>
<li><a href="../../../bootstrap-vue/docs/components/dropdown" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-dropdown&gt;</code> 下拉组件</a></li>
</ul>

<h2 id="component-reference" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title">组件参考<a href="../../../bootstrap-vue/docs/components/form-datepicker#component-reference" class="anchorjs-link" aria-labelledby="component-reference" target="_self"></a></span></h2>

<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-form-datepicker" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-form-datepicker&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form-datepicker#comp-ref-b-form-datepicker" class="anchorjs-link" aria-labelledby="comp-ref-b-form-datepicker" target="_self"></a></span></h3>
<span data-v-866a22e8="" class="badge badge-success">v2.5.0+</span> <!----></div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/form-datepicker/form-datepicker.js" class="btn btn-outline-secondary btn-sm"> 查看源代码 </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-form-datepicker-aliases"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-form-datepicker&gt;</code> 组件别名 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-form-datepicker-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-form-datepicker&gt;</code> 属性 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-form-datepicker-v-model"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-form-datepicker&gt;</code> v-model </a></li>
<!---->
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-form-datepicker-events"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-form-datepicker&gt;</code> 事件 </a></li>
<!---->
</ul>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-form-datepicker-aliases" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 组件别名 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form-datepicker#comp-ref-b-form-datepicker-aliases" class="anchorjs-link" aria-labelledby="comp-ref-b-form-datepicker-aliases" target="_self"></a></span></h4>
<p data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-form-datepicker&gt;</code> 也可以通过以下别名使用：</p>
<ul data-v-866a22e8="">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-datepicker&gt;</code></li>
</ul>
<div data-v-866a22e8="" class="alert alert-info">
<p data-v-866a22e8="" class="mb-0 small"> 注意：组件别名仅在导入所有 BootstrapVue 或使用组件组插件时可用。 </p>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-form-datepicker-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form-datepicker#comp-ref-b-form-datepicker-props" class="anchorjs-link" aria-labelledby="comp-ref-b-form-datepicker-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__3443">
<!----><!---->
<thead role="rowgroup" class="">
<!---->
<tr role="row" class="">
<th role="columnheader" scope="col" tabindex="0" aria-colindex="1" aria-sort="none" class="b-table-sort-icon-left">属性<span class="sr-only"> (Click to sort Ascending)</span></th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<!---->
<tr role="row" data-pk="id" class="" id="__BVID__3443__row_id">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">id</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">用于在渲染的内容上设置“ id”属性，并用作根据需要生成任何其他元素ID的基础</td>
</tr>
<!----><!---->
<tr role="row" data-pk="value" class="" id="__BVID__3443__row_value">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">value</code> <!----> <!----> <span data-v-866a22e8="" class="badge badge-primary">v-model</span> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String or Date</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">最初选择的日期值。接受“YYYY-MM-DD”字符串或“Date”对象</td>
</tr>
<!----><!---->
<tr role="row" data-pk="value-as-date" class="" id="__BVID__3443__row_value-as-date">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">value-as-date</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">返回 v-model 的 Date 对象而不是 YYYY-MM-DD 字符串</td>
</tr>
<!----><!---->
<tr role="row" data-pk="reset-value" class="" id="__BVID__3443__row_reset-value">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">reset-value</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String or Date</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">单击可选的“reset”按钮时，所选日期将设置为此值。默认是清除选择的值</td>
</tr>
<!----><!---->
<tr role="row" data-pk="placeholder" class="" id="__BVID__3443__row_placeholder">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">placeholder</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">当未选择日期时，文本将显示在表单控件中。默认为“label-no-date-selected”属性值</td>
</tr>
<!----><!---->
<tr role="row" data-pk="size" class="" id="__BVID__3443__row_size">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">size</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">设置组件外观的大小。 'sm'，'md'（默认）或'lg'</td>
</tr>
<!----><!---->
<tr role="row" data-pk="min" class="" id="__BVID__3443__row_min">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">min</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String or Date</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">日历显示的最短日期</td>
</tr>
<!----><!---->
<tr role="row" data-pk="max" class="" id="__BVID__3443__row_max">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">max</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String or Date</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">日历显示的最长时间</td>
</tr>
<!----><!---->
<tr role="row" data-pk="disabled" class="" id="__BVID__3443__row_disabled">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">disabled</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">将日历置于非交互式禁用状态</td>
</tr>
<!----><!---->
<tr role="row" data-pk="readonly" class="" id="__BVID__3443__row_readonly">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">readonly</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">将日历置于交互式只读状态。 禁用更新 v-model ，同时仍允许日期导航</td>
</tr>
<!----><!---->
<tr role="row" data-pk="required" class="" id="__BVID__3443__row_required">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">required</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，在组件上添加 aria-required = “true”属性。 所需的验证需要由您的应用程序处理</td>
</tr>
<!----><!---->
<tr role="row" data-pk="name" class="" id="__BVID__3443__row_name">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">name</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">设置表单控件上“name”属性的值</td>
</tr>
<!----><!---->
<tr role="row" data-pk="form" class="" id="__BVID__3443__row_form">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">form</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">表单控件所属的表单的 ID。在控件上设置“form”属性</td>
</tr>
<!----><!---->
<tr role="row" data-pk="state" class="" id="__BVID__3443__row_state">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">state</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">控制组件的验证状态外观。“true”表示有效，“false”表示无效”，“null”表示无验证状态</td>
</tr>
<!----><!---->
<tr role="row" data-pk="date-disabled-fn" class="" id="__BVID__3443__row_date-disabled-fn">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">date-disabled-fn</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Function</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">设置为一个函数引用，如果禁用了日期，则返回“true”，如果应启用日期，则返回“false”。有关详细信息，请参见文档</td>
</tr>
<!----><!---->
<tr role="row" data-pk="no-close-on-select" class="" id="__BVID__3443__row_no-close-on-select">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">no-close-on-select</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">单击/选择日期时，禁用关闭弹出日期选择器</td>
</tr>
<!----><!---->
<tr role="row" data-pk="hide-header" class="" id="__BVID__3443__row_hide-header">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">hide-header</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，可视地隐藏选定的日期标题</td>
</tr>
<!----><!---->
<tr role="row" data-pk="locale" class="" id="__BVID__3443__row_locale">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">locale</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String or Array</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">日历要使用的语言环境。 传递语言环境数组时，语言环境的顺序从最优选到最不喜欢</td>
</tr>
<!----><!---->
<tr role="row" data-pk="start-weekday" class="" id="__BVID__3443__row_start-weekday">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">start-weekday</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Number or String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">0</code></td>
<td aria-colindex="4" role="cell" class="">星期几开始日历。星期日为0，星期一为1，星期六为6，依此类推。</td>
</tr>
<!----><!---->
<tr role="row" data-pk="direction" class="" id="__BVID__3443__row_direction">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">direction</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">设置为字符串“rtl”或“ltr”以显式强制日历以从右到左或从左向右（分别）的方式渲染。默认为解析的语言环境的方向性</td>
</tr>
<!----><!---->
<tr role="row" data-pk="selected-variant" class="" id="__BVID__3443__row_selected-variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">selected-variant</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'primary'</code></td>
<td aria-colindex="4" role="cell" class="">用于所选日期按钮的主题颜色变量</td>
</tr>
<!----><!---->
<tr role="row" data-pk="today-variant" class="" id="__BVID__3443__row_today-variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">today-variant</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">主题颜色变体，用于突出显示 todays date 按钮。默认为`variant`属性</td>
</tr>
<!----><!---->
<tr role="row" data-pk="no-highlight-today" class="" id="__BVID__3443__row_no-highlight-today">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">no-highlight-today</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">禁用日历中今天日期的突出显示</td>
</tr>
<!----><!---->
<tr role="row" data-pk="today-button" class="" id="__BVID__3443__row_today-button">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">today-button</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，显示可选的 `select today` 按钮</td>
</tr>
<!----><!---->
<tr role="row" data-pk="label-today-button" class="" id="__BVID__3443__row_label-today-button">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">label-today-button</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'Select today'</code></td>
<td aria-colindex="4" role="cell" class="">可选的 `Select today` 按钮的内容</td>
</tr>
<!----><!---->
<tr role="row" data-pk="today-button-variant" class="" id="__BVID__3443__row_today-button-variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">today-button-variant</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'outline-primary'</code></td>
<td aria-colindex="4" role="cell" class="">用于可选的 `select today` 按钮的按钮变量</td>
</tr>
<!----><!---->
<tr role="row" data-pk="reset-button" class="" id="__BVID__3443__row_reset-button">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">reset-button</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，显示可选的 `reset` 按钮</td>
</tr>
<!----><!---->
<tr role="row" data-pk="label-reset-button" class="" id="__BVID__3443__row_label-reset-button">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">label-reset-button</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'Reset'</code></td>
<td aria-colindex="4" role="cell" class="">可选的 `Reset` 按钮的内容</td>
</tr>
<!----><!---->
<tr role="row" data-pk="reset-button-variant" class="" id="__BVID__3443__row_reset-button-variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">reset-button-variant</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'outline-danger'</code></td>
<td aria-colindex="4" role="cell" class="">用于可选的 `reset` 按钮的按钮变量</td>
</tr>
<!----><!---->
<tr role="row" data-pk="close-button" class="" id="__BVID__3443__row_close-button">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">close-button</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，显示可选的关闭按钮</td>
</tr>
<!----><!---->
<tr role="row" data-pk="label-close-button" class="" id="__BVID__3443__row_label-close-button">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">label-close-button</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'Close'</code></td>
<td aria-colindex="4" role="cell" class="">可选的“Close”【关闭】按钮的内容</td>
</tr>
<!----><!---->
<tr role="row" data-pk="close-button-variant" class="" id="__BVID__3443__row_close-button-variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">close-button-variant</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'outline-secondary'</code></td>
<td aria-colindex="4" role="cell" class="">用于可选的“Close”【关闭】按钮的按钮变量</td>
</tr>
<!----><!---->
<tr role="row" data-pk="label-prev-year" class="" id="__BVID__3443__row_label-prev-year">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">label-prev-year</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'Previous year'</code></td>
<td aria-colindex="4" role="cell" class="">“Previous Year”【上一年】导航按钮上的“aria-label”和“title”属性的值</td>
</tr>
<!----><!---->
<tr role="row" data-pk="label-prev-month" class="" id="__BVID__3443__row_label-prev-month">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">label-prev-month</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'Previous month'</code></td>
<td aria-colindex="4" role="cell" class="">“Previous Month”【上个月】导航按钮上的“aria-label”和“title”属性的值</td>
</tr>
<!----><!---->
<tr role="row" data-pk="label-current-month" class="" id="__BVID__3443__row_label-current-month">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">label-current-month</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'Current month'</code></td>
<td aria-colindex="4" role="cell" class="">“Current Month”【当前月】导航按钮上的“aria-label”和“title”属性的值</td>
</tr>
<!----><!---->
<tr role="row" data-pk="label-next-month" class="" id="__BVID__3443__row_label-next-month">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">label-next-month</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'Next month'</code></td>
<td aria-colindex="4" role="cell" class="">“Next Month”【下个月】导航按钮上的“aria-label”和“title”属性的值</td>
</tr>
<!----><!---->
<tr role="row" data-pk="label-next-year" class="" id="__BVID__3443__row_label-next-year">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">label-next-year</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'Next year'</code></td>
<td aria-colindex="4" role="cell" class="">“Next year”【下一年】导航按钮上的“ aria-label”和“ title”属性的值</td>
</tr>
<!----><!---->
<tr role="row" data-pk="label-today" class="" id="__BVID__3443__row_label-today">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">label-today</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'Today'</code></td>
<td aria-colindex="4" role="cell" class="">日历网格日期按钮的“aria-label”属性的值，表示该日期为今天的日期</td>
</tr>
<!----><!---->
<tr role="row" data-pk="label-selected" class="" id="__BVID__3443__row_label-selected">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">label-selected</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'Selected date'</code></td>
<td aria-colindex="4" role="cell" class="">在选定的日历网格日期按钮上设置的“aria-label”属性的值</td>
</tr>
<!----><!---->
<tr role="row" data-pk="label-no-date-selected" class="" id="__BVID__3443__row_label-no-date-selected">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">label-no-date-selected</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'No date selected'</code></td>
<td aria-colindex="4" role="cell" class="">当前未选择日期时要使用的标签</td>
</tr>
<!----><!---->
<tr role="row" data-pk="label-calendar" class="" id="__BVID__3443__row_label-calendar">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">label-calendar</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'Calendar'</code></td>
<td aria-colindex="4" role="cell" class="">“aria-label”和“role-description”属性的值应用于日历网格</td>
</tr>
<!----><!---->
<tr role="row" data-pk="label-nav" class="" id="__BVID__3443__row_label-nav">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">label-nav</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'Calendar navigation'</code></td>
<td aria-colindex="4" role="cell" class="">日历导航按钮包装上的 aria-label 属性的值</td>
</tr>
<!----><!---->
<tr role="row" data-pk="label-help" class="" id="__BVID__3443__row_label-help">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">label-help</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'Use cursor keys to navigate calendar dates'</code></td>
<td aria-colindex="4" role="cell" class="">出现在日历网格底部的帮助文本</td>
</tr>
<!----><!---->
<tr role="row" data-pk="dark" class="" id="__BVID__3443__row_dark">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">dark</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，为弹出日历对话框提供深色背景</td>
</tr>
<!----><!---->
<tr role="row" data-pk="dropup" class="" id="__BVID__3443__row_dropup">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">dropup</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，将菜单置于按钮顶部</td>
</tr>
<!----><!---->
<tr role="row" data-pk="dropright" class="" id="__BVID__3443__row_dropright">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">dropright</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，将菜单置于按钮右侧</td>
</tr>
<!----><!---->
<tr role="row" data-pk="dropleft" class="" id="__BVID__3443__row_dropleft">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">dropleft</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，将菜单置于按钮左侧</td>
</tr>
<!----><!---->
<tr role="row" data-pk="right" class="" id="__BVID__3443__row_right">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">right</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">将菜单的右边与按钮的右边对齐</td>
</tr>
<!----><!---->
<tr role="row" data-pk="offset" class="" id="__BVID__3443__row_offset">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">offset</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Number or String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">0</code></td>
<td aria-colindex="4" role="cell" class="">指定要移动菜单的像素数。 支持负值</td>
</tr>
<!----><!---->
<tr role="row" data-pk="no-flip" class="" id="__BVID__3443__row_no-flip">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">no-flip</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">防止菜单自动翻转位置</td>
</tr>
<!----><!---->
<tr role="row" data-pk="popper-opts" class="" id="__BVID__3443__row_popper-opts">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">popper-opts</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Any</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">传递给 Popper.js 的其他配置</td>
</tr>
<!----><!---->
<tr role="row" data-pk="boundary" class="" id="__BVID__3443__row_boundary">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">boundary</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String or HTMLElement</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'scrollParent'</code></td>
<td aria-colindex="4" role="cell" class="">菜单的边界约束：'scrollParent'，'window'，'viewport'或对 HTMLElement 的引用</td>
</tr>
<!----><!----><!----><!---->
</tbody>
<!---->
</table>
</div>
<!----> <!----></article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-form-datepicker-v-model" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> v-model <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form-datepicker#comp-ref-b-form-datepicker-v-model" class="anchorjs-link" aria-labelledby="comp-ref-b-form-datepicker-v-model" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped" id="__BVID__3505">
<!----><!---->
<thead role="rowgroup" class="">
<!---->
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">属性</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">事件</th>
</tr>
</thead>
<tbody role="rowgroup">
<!---->
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">value</code></td>
<td aria-colindex="2" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">input</code></td>
</tr>
<!----><!---->
</tbody>
<!---->
</table>
</div>
</article>
<!---->
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-form-datepicker-events" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 事件 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form-datepicker#comp-ref-b-form-datepicker-events" class="anchorjs-link" aria-labelledby="comp-ref-b-form-datepicker-events" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__3514">
<!----><!---->
<thead role="rowgroup" class="">
<!---->
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">事件</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">参数</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<!---->
<tr role="row" data-pk="input" class="" id="__BVID__3514__row_input">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">input</code> <!----></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">date</code> - <span data-v-866a22e8="">格式为 YYYY-MM-DD 的字符串或日期对象（如果 value-as-date 属性为 true）。</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">更新 v-model 时发出</td>
</tr>
<tr role="row" data-pk="context" class="" id="__BVID__3514__row_context">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">context</code> <!----></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">context</code> - <span data-v-866a22e8="">`b-calendar` 上下文对象。有关详细信息，请参见 “b-calendar” 文档</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">`b-calendar`上下文事件。当用户通过日期导航按钮或光标控件更改活动日期时发出</td>
</tr>
<!----><!---->
</tbody>
<!---->
</table>
</div>
</article>

<article class="bd-content">
<h3 id="importing-individual-components" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title"> 导入单个组件 <a href="../../../bootstrap-vue/docs/components/form-datepicker#importing-individual-components" class="anchorjs-link" aria-labelledby="importing-individual-components" target="_self"></a></span></h3>
<p> 您可以通过以下命名的导出将单个组件导入到项目中： </p>
<div class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__3526">
<!----><!---->
<thead role="rowgroup" class="thead-default">
<!---->
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">组件</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">命名输出</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">导入路径</th>
</tr>
</thead>
<tbody role="rowgroup">
<!---->
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-form-datepicker&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BFormDatepicker</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
<!----><!---->
</tbody>
<!---->
</table>
</div>
<p><strong>示例：</strong></p>
<figure class="highlight"><pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { BFormDatepicker } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.component(<span class="hljs-string">'b-form-datepicker'</span>, BFormDatepicker)</pre></figure>
</article>
<!---->
<article class="bd-content">
<h3 id="importing-as-a-plugin" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title"> 导入为Vue.js插件 <a href="../../../bootstrap-vue/docs/components/form-datepicker#importing-as-a-plugin" class="anchorjs-link" aria-labelledby="importing-as-a-plugin" target="_self"></a></span></h3>
<p> 该插件包括上面列出的所有单个组件。插件还包括任何组件别名。 </p>
<div class="table-responsive-sm">
<table fileds="namedExport,importPath" role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped b-table-caption-top" id="__BVID__3536">
<!----><!---->
<thead role="rowgroup" class="thead-default">
<!---->
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">命名输出</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">导入路径</th>
</tr>
</thead>
<tbody role="rowgroup">
<!---->
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">FormDatepickerPlugin</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
<!----><!---->
</tbody>
<!---->
</table>
</div>
<!---->
<p><strong>示例：</strong></p>
<figure class="highlight"><pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { FormDatepickerPlugin } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.use(FormDatepickerPlugin)</pre></figure>
</article>









</main>
</div>
</div>


<script src="../../../v4/assets/js/vendor/jquery-slim.min.js"></script>
<script src="../../../v4/dist/js/popper.min.js"></script> 
<script src="../../../v4/dist/js/bootstrap.min.js"></script> 
<script src="../../../v4/assets/js/docs.min.js"></script> 
<script src="../../../v4/assets/js/ie-emulation-modes-warning.js"></script> 
<script src="../../../v4/assets/js/docsearch.min.js"></script> 
<script>
  docsearch({
    appId: 'PRR89ISST8',
    apiKey: '95044d57d4d7bb744f322d1f18ed607f',
    indexName: 'z01-bootstrapV4',
    inputSelector: '#search-input',
    handleSelected: function (input, event, suggestion) {
      var url = suggestion.url;
      url = suggestion.isLvl1 ? url.split('#')[0]: url;
      // If it's a title we remove the anchor so it does not jump.
      window.location.href = url;
    },
    transformData: function (hits) {
      return hits.map(function (hit) {
        hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
        return hit;
      });
    },
    debug: false // Set debug to true if you want to inspect the dropdown
  });
</script> 
<script>
  Holder.addTheme('gray', {
    bg: '#777',
    fg: 'rgba(255,255,255,.75)',
    font: 'Helvetica',
    fontweight: 'normal'
  });
</script>
</body>
</html>
